import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:getx_scaffold/common/index.dart';
import 'package:oramemo/common/styles/colors.dart';

import 'createsetting_logic.dart';
import 'createsetting_state.dart';
import 'audio_selection_dialog.dart';

class CreatesettingPage extends StatelessWidget {
  const CreatesettingPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final CreatesettingLogic logic = Get.put(CreatesettingLogic());
    final CreatesettingState state = Get.find<CreatesettingLogic>().state;

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios, color: Colors.black),
          onPressed: () => Get.back(),
        ),
        // title: Text(
        //   '创建设置',
        //   style: TextStyle(
        //     color: Colors.black,
        //     fontSize: 18.sp,
        //     fontWeight: FontWeight.w500,
        //   ),
        // ),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 28.w, vertical: 40.h),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _buildContentSelectionRow(logic, state),
              SizedBox(height: 32.h),
              _buildCoverSelection(logic, state),
              SizedBox(height: 32.h),
              _buildStyleSelection(logic, state),
              SizedBox(height: 32.h),
              _buildLengthSelection(logic, state),
              SizedBox(height: 32.h),
              _buildPrivacySettings(logic, state),
              SizedBox(height: 74.h),
              _buildGenerateButton(logic),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildContentSelectionRow(
      CreatesettingLogic logic, CreatesettingState state) {
    return Row(
      children: [
        Expanded(
          child: _buildSelectionCard(
            title: '选择录音',
            onTap: () {
              logic.showAudioSelectionDialog();
            },
          ),
        ),
        SizedBox(
          width: 30.w,
        ),
        Expanded(
          child: _buildSelectionCard(
            title: '选择故事',
            onTap: () {
              logic.showStorySelectionDialog();
            },
          ),
        ),
      ],
    );
  }

  Widget _buildSelectionCard({
    required String title,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 148.w,
        height: 110.h,
        decoration: BoxDecoration(
          color: Color(0xFFEEEEEF),
          borderRadius: BorderRadius.circular(12.r),
        ),
        child: Column(
          children: [
            if (true)
              Row(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  _buildSelectionMiniCard(title: title, onTap: onTap),
                  _buildTextCard(onTap: () {}),
                ],
              )
            else
              Column(
                children: [
                  Container(
                    width: 24.w,
                    height: 24.h,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(color: Colours.text_gray, width: 2),
                    ),
                    child: Icon(
                      Icons.add,
                      color: Colours.text_gray,
                      size: 16.r,
                    ),
                  ),
                  SizedBox(height: 12.h),
                  Text(
                    title,
                    style: TextStyle(
                      fontSize: 14.sp,
                      color: Colours.text_gray,
                    ),
                  ),
                ],
              ),
          ],
        ),
      ),
    );
  }

  Widget _buildSelectionMiniCard({
    required String title,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 62.w,
        height: 58.h,
        decoration: BoxDecoration(
            color: Color(0xFFEEEEEF),
            borderRadius: BorderRadius.circular(12.r),
            border: Border.all(color: Colours.text_gray)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 24.w,
              height: 24.h,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(color: Colours.text_gray, width: 2),
              ),
              child: Icon(
                Icons.add,
                color: Colours.text_gray,
                size: 16.r,
              ),
            ),
            Text(
              title,
              style: TextStyle(
                fontSize: 10.sp,
                color: Colours.text_gray,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildAddCard({
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 80.w,
        height: 90.h,
        margin: EdgeInsets.all(10.w),
        decoration: BoxDecoration(
          color: Color(0xFFEEEEEF),
          borderRadius: BorderRadius.circular(12.r),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 24.w,
              height: 24.h,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(color: Colours.text_gray, width: 2),
              ),
              child: Icon(
                Icons.add,
                color: Colours.text_gray,
                size: 16.r,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildImgCard({
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 80.w,
        height: 90.h,
        margin: EdgeInsets.all(10.w),
        decoration: BoxDecoration(
          color: Color(0xFFEEEEEF),
          borderRadius: BorderRadius.circular(12.r),
        ),
        child: Stack(
          children: [
            Positioned(
              right: 0,
              child: Container(
                width: 22.w,
                height: 22.h,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  border: Border.all(color: Colours.text_gray, width: 2),
                ),
                child: Icon(
                  AntdIcon.close,
                  color: Colours.text_gray,
                  size: 16.r,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTextCard({
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 62.w,
        height: 58.h,
        decoration: BoxDecoration(
          color: Colours.text_gray,
          borderRadius: BorderRadius.circular(12.r),
        ),
        child: Stack(
          children: [
            Center(
                child: Padding(
                  padding: const EdgeInsets.all(6.0),
                  child: Text(
                                '显示录音转写总结显示录音转写总结',
                                maxLines: 2,
                                overflow: TextOverflow.ellipsis,
                                textAlign: TextAlign.center,
                                style: TextStyle(color: Colors.white, fontSize: 10.sp),
                              ),
                )),
            Positioned(
              top: 3,
              right: 3,
              child: Container(
                width: 12.w,
                height: 12.h,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  border: Border.all(color: Colors.white, width: 1),
                ),
                child: Icon(
                  AntdIcon.close,
                  color: Colors.white,
                  size: 10.r,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildCoverSelection(
      CreatesettingLogic logic, CreatesettingState state) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: double.infinity,
          height: 110.h,
          decoration: BoxDecoration(
            color: Color(0xFFF9FBFF),
            borderRadius: BorderRadius.circular(12.r),
            border: Border.all(
              color: Color(0x262574FF),
            ),
          ),
          child: Row(
            children: [
              Expanded(
                child: Padding(
                  padding: EdgeInsets.only(left: 30.w),
                  child: Text(
                    '封面选择',
                    style: TextStyle(
                      fontSize: 16.sp,
                      color: Colors.grey.shade600,
                    ),
                  ),
                ),
              ),
              // _buildAddCard(onTap: (){})
              _buildImgCard(onTap: () {})
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildStyleSelection(
      CreatesettingLogic logic, CreatesettingState state) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '选择文体',
          style: TextStyle(
            fontSize: 16.sp,
            color: Colours.app_main,
            fontWeight: FontWeight.w500,
          ),
        ),
        SizedBox(height: 16.h),
        Obx(() => Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                _buildStyleOption(
                    '自传体', TextStyleType.autobiography, logic, state),
                _buildStyleOption('日记体', TextStyleType.diary, logic, state),
                _buildStyleOption('访谈体', TextStyleType.interview, logic, state),
                _buildStyleOption('混合体', TextStyleType.mixed, logic, state),
              ],
            )),
      ],
    );
  }

  Widget _buildStyleOption(String title, TextStyleType style,
      CreatesettingLogic logic, CreatesettingState state) {
    bool isSelected = state.selectedTextStyle.value == style;

    return GestureDetector(
      onTap: () => logic.setTextStyle(style),
      child: Container(
        width: 80.w,
        height: 32.h,
        padding: EdgeInsets.only(bottom: 2.h),
        decoration: BoxDecoration(
          color: isSelected ? Colours.app_main : Colors.white,
          borderRadius: BorderRadius.circular(22.r),
          border: Border.all(
            color: isSelected ? Colours.app_main : Colours.app_main,
            width: 1.w,
          ),
        ),
        alignment: Alignment.center,
        child: Text(
          title,
          style: TextStyle(
            fontSize: 14.sp,
            color: isSelected ? Colors.white : Colours.app_main,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
    );
  }

  Widget _buildLengthSelection(
      CreatesettingLogic logic, CreatesettingState state) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '文章长度',
          style: TextStyle(
            fontSize: 16.sp,
            color: Colours.app_main,
            fontWeight: FontWeight.w500,
          ),
        ),
        SizedBox(height: 16.h),
        Obx(() => Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                _buildLengthOption('短篇', ArticleLength.short, logic, state),
                _buildLengthOption('中篇', ArticleLength.medium, logic, state),
                _buildLengthOption('长篇', ArticleLength.long, logic, state),
              ],
            )),
      ],
    );
  }

  Widget _buildLengthOption(String title, ArticleLength length,
      CreatesettingLogic logic, CreatesettingState state) {
    bool isSelected = state.selectedLength.value == length;

    return GestureDetector(
      onTap: () => logic.setArticleLength(length),
      child: Container(
        width: 80.w,
        height: 32.h,
        margin: EdgeInsets.only(right: 9.w),
        padding: EdgeInsets.only(bottom: 2.h),
        decoration: BoxDecoration(
          color: isSelected ? Colours.app_main : Colors.white,
          borderRadius: BorderRadius.circular(22.r),
          border: Border.all(
            color: isSelected ? Colours.app_main : Colours.app_main,
            width: 1.w,
          ),
        ),
        alignment: Alignment.center,
        child: Text(
          title,
          style: TextStyle(
            fontSize: 14.sp,
            color: isSelected ? Colors.white : Colours.app_main,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
    );
  }

  Widget _buildPrivacySettings(
      CreatesettingLogic logic, CreatesettingState state) {
    return GestureDetector(
      onTap: () => logic.navigateToPrivacySettings(),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            child: Text(
              '谁可以看',
              style: TextStyle(
                fontSize: 16.sp,
                color: Colours.app_main,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
          Icon(
            Icons.arrow_forward_ios,
            color: Colors.grey.shade400,
            size: 20.r,
          ),
        ],
      ),
    );
  }

  Widget _buildGenerateButton(CreatesettingLogic logic) {
    return Center(
      child: GestureDetector(
        onTap: () => logic.generatePreview(),
        child: Container(
          width: 200.w,
          height: 56.h,
          decoration: BoxDecoration(
            color: Colours.app_main,
            borderRadius: BorderRadius.circular(12.r),
          ),
          alignment: Alignment.center,
          child: Text(
            '生成预览',
            style: TextStyle(
              fontSize: 18.sp,
              color: Colors.white,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ),
    );
  }
}
